import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import PropTypes from 'prop-types';

function Line ({data}) {
  //const companys = data.filter(item=>item.data_month==1).map(item=>item.company) //取出公司名（companys）

  // const company = data.filter(item=>item.data_month==1) //取数组
  // const companys = companys.map(item=>item.company) //取数组里的公司
  const companys = ["公共关系部", "管理咨询部", "综合福利事业部", "蓝众律所", "国际教育", "天拓", "蓝圣BPO",
       "蓝聘公司", "上二", "上一", "上三", "南京", "苏州", "无锡", "杭州", "东区管理中心", "郑州", "武汉", "长沙",
       "广州", "深圳", "成都", "重庆", "哈尔滨", "北京一", "北京二", "大连一", "大连二", "沈阳", "长春", "天津", "青岛",
       "济南", "华东区小计", "华南区小计", "华北区小计", "南区管理中心"];

  const series = companys.map((item)=>{ //遍历数据对象，(外循环)一个折线图对应一个公司
    const values = data.filter(key=>key.company===item); //内循环
    return  {
       name: item,
       smooth:true, //折线变圆滑
       type: 'line',
       data: values.map(item=>item.record)
     }
  })
  const {xLabel, value, title, name} = data

  const option = {
    title: {
        text: title,
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}'
    },
    legend: {  //查找的小图标
        left:'8%',
        top:'9%',
        data: companys
    },
    xAxis: { //轴
        type: 'category',
        name: '月/X',
        splitLine: {show: false},
        data: ['1月','2月','3月','4月','5月']
    },
    grid: { //折线图
        left: '10%',
        bottom: '2%',
        top:'28%',
        containLabel: true
    },
    yAxis: { //y轴
        type: 'value',
        name: '指数/Y'
    },
    series:series

};

  return (
        <ReactEcharts
          option={option}
          style={{height: '60vh', width: '100%'}} //折现的高、宽
        />
  )
}
Line.propTypes = {
  data: PropTypes.array.isRequired,//组件配置
  // xLabel: PropTypes.array.isRequired,//x轴的字段名称
  // value: PropTypes.array.isRequired,//y轴数据值
  // title: PropTypes.string,//组件名称
  // name: PropTypes.string//数据名称
};
export default Line;
